<template>
	<div class="box">
		<div class="box-shadow">
			<div class="block-box">
				<div class="public-title">
					<h3>{{ title }}</h3>
				</div>
				<ul>
					<li v-for="(item, index) in data"
						:key="index">
						<div class="thumbnail">
							<nuxt-link to="">
								<img :src="url + item.image"
									 alt="item.title">
							</nuxt-link>
						</div>
						<div class="intro">
							<p>
								<nuxt-link to="">
									{{ item.title }}
								</nuxt-link>
							</p>
							<span>{{ item.created_time }}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'tag',
	data () {
		return {
			title: '',
			data: null,
			url: process.env.BASE_URL
		}
	},
	props: {
		sort: {
			type: String
		}
	},
	created () {
		if (this.sort === 'views') {
			this.title = '浏览量最多的文章'
			this.data = this.$store.state.article.viewsList
		} else if (this.sort === 'comment') {
			this.title = '评论最多的文章'
			this.data = this.$store.state.article.idList
		}
	}
}
</script>

<style lang="less" scoped>
.box {
	padding: 10px;

	ul {
		padding: 15px 0;

		li {
			margin-bottom: 15px;
			overflow: hidden;

			&:last-child {
				margin-bottom: 0;
			}

			.thumbnail {
				width: 90px;
				height: 60px;
				float: left;
			}

			.intro {
				font-size: 14px;
				width: 230px;
				height: 60px;
				float: right;
				position: relative;

				p {
					color: #333;
				}

				span {
					color: #666;
					position: absolute;
					bottom: 0;
				}
			}
		}
	}
}
</style>
